<template>


    <!-- vue2 必须有唯一的一个跟标签
         vue3 不需要   
    
    -->
    <div>

        <h3>简单表格</h3>
        <!-- 
        data：定义的表格战术的数据
          stripe  单双杠 效果有背景区别
         -->
        <el-table :data="userList" stripe>
            <!--  prop： 字段名称 对应列内容的字段名， 也可以使用 property属性
              label 	显示的标题

              type="index" 序号列
              align="center"
            
             -->
            <el-table-column type="index" fixed label="序号" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>

            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>




        <h3>可选择的表格</h3>
        <button @click="delPath">批量删除</button>
        <el-table :data="userList" stripe @select="tableselect" @selection-change="selectionChange">
            <el-table-column type="selection" label="选项"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>

        </el-table>


    </div>


</template>

<script setup lang="ts" name='index'>
import { ref, reactive } from "vue";
interface User {
    name: string;
    age: number
}

//当用户手动勾选数据行的 Checkbox 时触发的事件
function tableselect(rowData: User) {
    // console.log(rowData);
}

//当选择项发生变化时会触发该事件 1可以获取当前所有选中的数据，做删除，批量删除
function selectionChange(allSelectedDate: User[]) {
    console.log(allSelectedDate);

}

function delPath() {

}



let userList = reactive([
    {
        id: 1,
        name: '张三',
        age: 18
    },
    {
        id: 2,
        name: '李四',
        age: 19
    },
    {
        id: 3,
        name: '王五',
        age: 20
    }

])


</script>






<style scoped></style>